<template>
  <div class="productsDetail">
    <navBar title="商品详情" />

    <!-- 商品轮播 -->
    <van-swipe class="shop-swipe" @change="change">
      <van-swipe-item v-for="(item, i) in storeInfo.sliderImageArr" :key="i">
        <van-image width="100%" height="100%" :src="item" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          {{ changeIndex + 1 }}/{{ storeInfo.sliderImageArr?.length + 1 }}
        </div>
      </template>
    </van-swipe>

    <!-- 价格模块 -->
    <van-cell title="单元格" value="内容" label="描述信息">
      <template #title>
        <div class="price">
          ￥<span style="font-size: 24px">{{ storeInfo.price }}</span>
        </div>
      </template>
      <template>
        <div class="rightBox">
          <div class="reply">
            <div>{{ storeInfo.sales }}</div>
            销量
          </div>
          <div class="browse">
            <div>{{ storeInfo.browse }}</div>
            浏览
          </div>
        </div>
      </template>
      <template #label>
        <div class="text">{{ storeInfo.storeInfo }}</div>
      </template>
    </van-cell>

    <!-- 规格选择 -->
    <van-cell title="选择规格" :value="selectdeText" is-link @click="show = true" />

    <!-- 图片详细 -->
    <div class="content">
      <div class="title">图文详情</div>
      <div class="description" v-html="storeInfo.description"></div>
    </div>

    <!-- GoodsAction 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon
      icon="cart-o" text="购物车"
      @click="$router.push('/cart')"/>
      <van-goods-action-icon
      @click="collect"
      :icon="storeInfo.userCollect ? 'star' : 'star-o'"
      :text="storeInfo.userCollect ? '已收藏' : '收藏'"
      :color="storeInfo.userCollect ? '#ff5000' : ''" />
      <van-goods-action-button type="warning" text="加入购物车" @click="show = true" />
      <van-goods-action-button type="danger" text="立即购买" @click="show = true" />
    </van-goods-action>

    <!-- 商品sku -->
    <van-sku v-model="show" :sku="sku"
    @sku-selected="selectedSku"
    @buy-clicked="buyclicked"
    :goods="goods" @add-cart="addCart" />
  </div>
</template>

<script>
import { getProductDetail, addCollect, delCollect } from "@/api/product";
import { addCart } from '@/api/cart'
import { sku, goods, setSku } from './sku'

export default {
  data() {
    return {
      shopid: "", // 商品id
      detail: null, // 商品信息
      changeIndex: 0, // 轮播图index
      show: false, // sku
      timeout: null, // 节流
      selectdeText: '',
      sku,
      goods,
    };
  },
  created() {
    const { id } = this.$route.query;
    this.shopid = id;
    this.getProductDetail();
  },
  methods: {
    // 获取商品信息
    async getProductDetail() {
      const { data } = await getProductDetail(this.shopid);
      // console.log(data);
      this.detail = data || {};
      setSku(this.detail)
    },

    // 图片选中事件
    change(e) {
      this.changeIndex = e;
    },

    // 加入购物车
    async addCart(e) {
      const { id, shopid,  } = e.selectedSkuComb
      const res = await addCart({
        cartNum: e.selectedNum,
        productId: id,
        uniqueId: shopid,
        new: 0
      })
      if(res.status === 200) return this.$toast.success('已加入购物车~')
      this.$toast.fail(res.msg)
    },

    // 立即购买
    async buyclicked(e) {
      const { id, shopid,  } = e.selectedSkuComb
      const res = await addCart({
        cartNum: e.selectedNum,
        productId: id,
        uniqueId: shopid,
        new: 0
      })
      if(res.status === 200) return this.$router.push({
        path: '/confirmOrder',
        query: { ids: res.data?.cartId }
      })
      this.$toast.fail(res.msg)
    },

    // sku选中事件
    selectedSku(e) {
      this.selectdeText = e.skuValue?.name
    },

    // 收藏
    async collect() {
      const { userCollect } = this.storeInfo
      if(!userCollect) { // 添加收藏
        const res = await addCollect({
          category: 'collect',
          id: this.shopid
        })
        if(res.status === 200) return this.getProductDetail()
        this.$toast(res.msg)
      } else {  // 取消收藏
        const res = await delCollect({
          category: 'collect',
          id: this.shopid
        })
        if(res.status === 200) return this.getProductDetail()
        this.$toast(res.msg)
      }
    },
  },
  computed: {
    // 商品基本信息
    storeInfo() {
      return this.detail?.storeInfo || {};
    },
  },
};
</script>
<style lang="scss" scoped>
.productsDetail {
  text-align: left;
  .shop-swipe {
    margin: 10px;
    // padding: 0 10px;
    height: 300px;
    .van-swipe-item {
      width: 100%;
      height: 100%;
      background-color: #fff;
    }
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 3px 5px;
      background: #d4d4d4;
      font-size: 12px;
      color: #fff;
      border-radius: 5px;
    }
  }
  .van-cell {
    margin: 0 10px 8px;
    width: calc(100% - 20px);
    .price {
      color: #eb7b0d;
    }
    .rightBox > div {
      float: right;
      text-align: center;
      font-size: 12px;
      line-height: 1.2;
      margin-left: 8px;
    }
    .text {
      margin-top: 5px;
      font-size: 14px;
      color: #333;
    }
  }
  .content {
    margin: 0 10px;
    padding: 10px 20px;
    background-color: #fff;
    .title {
      margin: 10px 0;
      font-size: 14px;
      font-weight: 550;
    }
  }
}
</style>
